<template>
  <div class="page-container">
    <div class="page-content">
      <!--搜索-->
      <div class="panel-container">
        <searchuinew ref="searchuinew" :searchFormArr="searchFormArr" @searchParma="searchParma" :isAccording="isAccording">
          <template v-slot:button>
            <el-button size="mini" type="primary" @click="handleExport" :loading="loadingExport">导出</el-button>
          </template>
        </searchuinew>
      </div>
      <div class="panel-container no-margin">
        <el-table :data="dataList" size="mini" :header-cell-style="{ background: '#F5F5F5', color: '#000000' }" ref="table" style="width: 100%" v-loading="dataListLoading">
          <el-table-column align="center" header-align="center" label="序号" type="index" width="100"></el-table-column>
          <el-table-column align="center" header-align="center" label="信息标题" prop="title" width="300"></el-table-column>
          <el-table-column align="center" header-align="center" label="招标编号" prop="bh" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="招标单位" prop="dw" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="项目" prop="xm_name" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" header-align="center" label="区域" prop="qy" width="200"> </el-table-column>
          <el-table-column align="center" header-align="center" label="项目规模" prop="gm" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="项目进度" prop="jd" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" header-align="center" label="项目类别" prop="lb" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="项目地址" prop="address" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="项目工期" prop="gq" width="200" show-overflow-tooltip></el-table-column>
          <el-table-column align="center" header-align="center" label="招标状态" prop="zt" width="200" show-overflow-tooltip>
            <template slot-scope="scope">
              <div v-if="scope.row.zb_dw">中标({{ scope.row.zb_dw }})</div>
              <div v-else>{{ scope.row.zt }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" header-align="center" label="联系方式" prop="phone" width="150"></el-table-column>
          <el-table-column align="center" header-align="center" label="报名截止时间" prop="bmjzsj" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="投标截止时间" prop="tbjzsj" width="200"></el-table-column>
          <el-table-column align="center" header-align="center" label="发布时间" prop="fbsj" width="200"></el-table-column>
          <el-table-column align="center" fixed="right" header-align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="text" class="grey" @click="handleLink(scope)" :disabled="!scope.row.href">原文链接</el-button>
              <el-button size="mini" type="text" class="grey" @click="handleDetail(scope)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        small
        background
        :current-page="pageIndex"
        :page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :total="totalPage"
        @current-change="currentChangeHandle"
        @size-change="sizeChangeHandle"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-top: 20px; text-align: right"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { apiYunZhuList, apiYunZhuExport } from '@/api/auctionIndustryData'
import { formatFormData } from '@/utils'
export default {
  name: 'YunZhuJiCai',
  data() {
    return {
      searchFormArr: [
        {
          fieldName: '招标状态：',
          type: 'select',
          field: 'zt',
          option: [
            { id: '报名中', text: '报名中' },
            { id: '投标中', text: '投标中' },
            { id: '中标', text: '中标' },
            { id: '未知', text: '未知' },
          ],
          placeholder: '请选择招标状态',
        },
        {
          fieldName: '信息标题：',
          type: 'input',
          field: 'title',
          placeholder: '请输入信息标题',
        },
        {
          fieldName: '招标编号：',
          type: 'input',
          field: 'bh',
          placeholder: '请输入招标编号',
        },
        {
          fieldName: '招标单位：',
          type: 'input',
          field: 'dw',
          placeholder: '请输入招标单位',
        },
        {
          fieldName: '项目：',
          type: 'input',
          field: 'xm_name',
          placeholder: '请输入项目',
        },
        {
          fieldName: '区域：',
          type: 'input',
          field: 'qy',
          placeholder: '请输入区域',
        },
        {
          fieldName: '报名截止时间：',
          type: 'timePicker',
          field: 'time1',
          placeholder: '请选择报名截止时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '投标截止时间：',
          type: 'timePicker',
          field: 'time2',
          placeholder: '请选择投标截止时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
        {
          fieldName: '发布时间：',
          type: 'timePicker',
          field: 'time3',
          placeholder: '请选择发布时间',
          timeType: 'daterange',
          format: 'yyyy-MM-dd',
        },
      ],
      isAccording: true,
      searchParams: {
        zt: '',
        title: '',
        bh: '',
        dw: '',
        xm_name: '',
        qy: '',
        bmjzsj_start_time: '',
        bmjzsj_end_time: '',
        tbjzsj_start_time: '',
        tbjzsj_end_time: '',
        fbsj_start_time: '',
        fbsj_end_time: '',
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      loadingExport: false,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.getDataList()
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      const formData = formatFormData(Object.assign({ pageNumber: this.pageIndex, pageSize: this.pageSize }, this.searchParams))
      apiYunZhuList(formData)
        .then((res) => {
          const { items, total } = res.result
          this.dataList = items
          this.totalPage = total
          this.dataListLoading = false
        })
        .catch((e) => {
          this.dataList = []
          this.totalPage = 0
          this.dataListLoading = false
        })
    },

    // 列表查询
    searchParma(e) {
      this.searchFormArr.forEach((item) => {
        if (item.type === 'timePicker') {
          return
        }
        if (e[item.field] || e[item.field] === 0) {
          this.searchParams[item.field] = e[item.field]
        } else {
          this.searchParams[item.field] = ''
        }
      })
      if (e.time1) {
        this.searchParams.bmjzsj_start_time = e.time1[0]
        this.searchParams.bmjzsj_end_time = e.time1[1]
      } else {
        this.searchParams.bmjzsj_start_time = this.searchParams.bmjzsj_end_time = ''
      }
      if (e.time2) {
        this.searchParams.tbjzsj_start_time = e.time2[0]
        this.searchParams.tbjzsj_end_time = e.time2[1]
      } else {
        this.searchParams.tbjzsj_start_time = this.searchParams.tbjzsj_end_time = ''
      }
      if (e.time3) {
        this.searchParams.fbsj_start_time = e.time3[0]
        this.searchParams.fbsj_end_time = e.time3[1]
      } else {
        this.searchParams.fbsj_start_time = this.searchParams.fbsj_end_time = ''
      }
      this.pageIndex = 1
      this.getDataList()
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 导出
    handleExport() {
      if (this.loadingExport) {
        return
      }
      this.loadingExport = true
      const formData = formatFormData(this.searchParams)
      apiYunZhuExport(formData).then((res) => {
        this.exportFunction(res.result.items)
      })
    },
    exportFunction(lis) {
      const headerProperty = ['title', 'bh', 'dw', 'xm_name', 'qy', 'gm', 'jd', 'lb', 'address', 'gq', 'zbzt', 'phone', 'bmjzsj', 'tbjzsj', 'fbsj']
      const headerLabel = ['信息标题', '招标编号', '招标单位', '项目', '区域', '项目规模', '项目进度', '项目类别', '项目地址', '项目工期', '招标状态', '联系方式', '报名截止时间', '投标截止时间', '发布时间']
      const name = '云筑集采'
      const list = lis.map((item) => {
        if (item.zb_dw) {
          item.zbzt = `中标(${item.zb_dw})`
        } else {
          item.zbzt = item.zt
        }
        return item
      })
      this.handleDownload(headerProperty, list, headerLabel, name)
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    handleDownload(headerProperty, list, headerLabel, name) {
      import('@/vendor/Export2Excel').then((excel) => {
        const data = this.formatJson(headerProperty, list)
        excel.export_json_to_excel({
          header: headerLabel,
          data,
          filename: name,
          autoWidth: this.autoWidth,
          bookType: 'xlsx',
        })
        this.loadingExport = false
      })
    },
    // 原文链接
    handleLink(scope) {
      window.open(scope.row.href)
    },
    // 详情
    handleDetail(scope) {
      localStorage.setItem('yunzhu-item-info', JSON.stringify(scope.row))
      this.$router.push({
        name: 'YunZhuJiCaiDetail',
        query: {
          id: scope.row.id,
        },
      })
    },
  },
}
</script>

<style scoped lang="scss"></style>
